<template>
  <div class="comment-details clear">
    <div class="top">
      <p class="title">{{child_info.txt}}</p>
      <p class="time">{{child_info.create_time}}</p>
    </div>
    <div class="comment">
      <p class="title">点评内容</p>
      <x-textarea v-model="content" name="detail" placeholder="请编辑点评内容..." :show-counter="false" v-show="child_info.review == '0'"></x-textarea>
      <x-textarea name="detail" :value="child_info.content" :show-counter="false" v-show="child_info.review == '1'"></x-textarea>
    </div>
    <div v-show="child_info.review == '0'" class="btn" @click="sub()"><span>发布</span></div>
    <alert-box :alert-message = "alert"></alert-box>
  </div>
</template>

<script>
    import alertBox from '@/components/alertBox'
    import { XTextarea } from 'vux'
  import {childInfo,teacherComment} from '@/api/api'

  export default {
    components: {
      alertBox,
      XTextarea,
    },
    data () {
      return {
          child_info:[],
          content:'',
          alert: {},
      }
    },
    created () {
        this.getChildInfo();
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      getChildInfo(){
        childInfo({id:this.$route.query.id}).then((res)=>{
          this.child_info = res.data.info
        })
      },
      sub(){
        teacherComment({id:this.$route.query.id,content:this.content}).then((res)=>{
          if(res.data.status==1){
            this.alert = {
              tip: res.data.info,
              btn: '确定',
              path: {path: '/person'},
              is_show: true
            }
          }else {
            this.alert = {
              tip: res.data.info,
              btn: '确定',
              path: {path: ''},
              is_show: true
            }
          }
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.comment-details
  .weui-cell
    padding 0
    &:before
      content ''
      display none
    textarea
      height calc(100vh - 30rem)
  .top
    padding 1.5rem 0
    padding-left 1.5rem
    border-bottom 1rem solid #f5f5f5
    .title
      color #333333
      font-size 1.5rem
      font-weight 500
    .time
      color #999
      font-size 1.2rem
  .comment
    background-color #fff
    padding 0 1.5rem
    .title
      line-height 2.7rem
      font-size 1.7rem
      color #000
      font-weight bold
      padding 1.5rem 0
  .btn
    width 100%
    position fixed
    height 5rem
    background-color #fff
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    bottom 0
    span
      color #fff
      font-size 1.5rem
      text-align center
      line-height 4rem
      height 4rem
      width 92%
      margin-left 4%
      background-color #172F6D
      font-weight 500
      border-radius 100px
      display block
      margin-top .5rem
</style>
